<nz-card>
  <div class="seach-wrap">
    <div class="seach-lf">
      <nz-space>
        <button *nzSpaceItem nz-button nzType="primary" (click)="openModel(0)">新增分类</button>
      </nz-space>
    </div>
  
    <div class="seach-rt">
      <div class="seach-item">
        <label class="seach-item-label">所属板块：</label>
        <nz-select nzShowSearch nzAllowClear nzPlaceHolder="全部" [(ngModel)]="seachParams.boardId">
          <nz-option
            *ngFor="let item of plateOptions"
            [nzLabel]="item.boardName"
            [nzValue]="item.id">
          </nz-option>
        </nz-select>
      </div>
  
      <div class="seach-btns">
        <nz-space>
          <button *nzSpaceItem nz-button nzType="primary" (click)="queryData()">查询</button>
          <button *nzSpaceItem nz-button (click)="resetData()">重置</button>
        </nz-space>
      </div>
    </div>
  </div>
  
  <main class="pagination-wrap-position">
    <!-- Table -->
    <div class="table-wrap">
        <nz-table
          #basicTable
          nzSize="small"
          nzShowSizeChanger
          nzShowQuickJumper
          nzOuterBordered
          [nzFrontPagination]="false"
          [nzLoadingDelay]="100"
          [nzLoading]="tableForms.tableLoading"
          [nzData]="tableData"
          [nzPageSizeOptions]="[5, 10, 20, 50, 100]"
          [nzTotal]="tableForms.total"
          [nzPageIndex]="tableForms.page"
          [nzPageSize]="tableForms.pageSize"
          [nzShowTotal]="totalTemplate"
          (nzPageIndexChange)="onPageIndexChange($event)"
          (nzPageSizeChange)="onPageSizeChange($event)"
        >
          <thead>
            <tr>
              <th nzAlign="center" nzWidth="120px">ID</th>
              <th nzAlign="center">归属板块</th>
              <th nzAlign="center">分类名字</th>
              <th nzAlign="center">排序</th>
              <th nzAlign="center">状态</th>
              <th nzAlign="center" nzWidth="300px">操作</th>
            </tr>
          </thead>
  
          <tbody>
            <tr *ngFor="let data of basicTable.data; let index = index;">
              <td nzAlign="center">{{ data.id }}</td>
              <td nzAlign="center">
                {{ transformText(data.boardId) }}
              </td>
              <td nzAlign="center">{{ data.typeName || '-' }}</td>
              <td nzAlign="center">{{ data.sort }}</td>
              <td nzAlign="center">
                <span [ngStyle]="{'color': data.status == 0 ? '#f00000' : '#008000'}">
                  {{ data.status == 0 ? '无效' : data.status == 1 ? '有效' : '-' }}
                </span>
              </td>
              <td nzAlign="center">
                <button
                  nz-button
                  nzType="link"
                  (click)="openModel(1, data)">
                  编辑
                </button>
                <a
                  nz-button
                  nzType="text"
                  nzDanger
                  nz-popconfirm
                  nzPopconfirmTitle="确认删除吗?"
                  [nzIcon]="iconTpl"
                  (nzOnConfirm)="deleteItem(data)">删除</a>
                <ng-template #iconTpl>
                  <i nz-icon nzType="question-circle-o" style="color: red;"></i>
                </ng-template>
              </td>
            </tr>
          </tbody>
        </nz-table>
  
        <!-- 分页template -->
        <ng-template #totalTemplate let-total>共有 {{ tableForms.total }} 条</ng-template>
    </div>
  </main>
</nz-card>

<!-- model START -->
<nz-modal
  nzClassName="custom-model-wrap"
  [(nzVisible)]="isModelVisible"
  [nzTitle]="modelType == 0 ? '新增分类' : '编辑分类'"
  [nzOkLoading]="subLoading"
  [nzContent]="modalContent"
  [nzFooter]="null"
  (nzOnCancel)="handleCancel()">
  <ng-template #modalContent>
    <div class="custom-model-body">
      <form nz-form [formGroup]="validateForm">
        <nz-form-item>
          <nz-form-label [nzSpan]="7" class="label-sp" nzRequired>分类名称</nz-form-label>
          <nz-form-control [nzSpan]="12" nzErrorTip="请输入分类名称">
            <input nz-input formControlName="typeName" placeholder="请输入分类名称" />
          </nz-form-control>
        </nz-form-item>
  
        <nz-form-item>
          <nz-form-label [nzSpan]="7" class="label-sp" nzRequired>所属板块</nz-form-label>
          <nz-form-control [nzSpan]="12" nzErrorTip="请选择所属板块">
            <nz-select nzShowSearch nzAllowClear nzPlaceHolder="请选择所属板块" formControlName="boardId">
              <nz-option
                *ngFor="let item of plateOptions"
                [nzLabel]="item.boardName"
                [nzValue]="item.id">
              </nz-option>
            </nz-select>
          </nz-form-control>
        </nz-form-item>
  
        <nz-form-item>
          <nz-form-label [nzSpan]="7" class="label-sp" nzRequired>排序</nz-form-label>
          <nz-form-control [nzSpan]="12" nzErrorTip="请输入排序">
            <nz-input-number [nzPrecision]="1" [nzStep]="1" nzPlaceHolder="请输入排序" formControlName="sort"></nz-input-number>
          </nz-form-control>
        </nz-form-item>
  
        <nz-form-item>
          <nz-form-label [nzSpan]="7" class="label-sp" nzRequired>状态</nz-form-label>
          <nz-form-control [nzSpan]="12" nzErrorTip="请选择状态">
            <nz-radio-group formControlName="status">
              <label nz-radio nzValue="1">有效</label>
              <label nz-radio nzValue="0">无效</label>
            </nz-radio-group>
          </nz-form-control>
        </nz-form-item>
      </form>
    </div>

    <div class="custom-model-foot">
      <div class="custom-foot-cont">
        <button nz-button nzType="default" (click)="handleCancel()">取消</button>
        <button nz-button nzType="primary" (click)="handleOk()">确定</button>
      </div>
    </div>
  </ng-template>
</nz-modal>
<!-- model END -->